<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="multipart/form-data;charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" th:href="@{../bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{../css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{../css/main.css}">

    <style>
        .tree li {
            list-style-type: none;
            cursor:pointer;
        }
        table tbody tr:nth-child(odd){background:#F4F4F4;}
        table tbody td:nth-child(even){color:#C00;}
        select,option{
            font-size: 20px;
        }
        .btnControl{
            background-color: #000099;
            color: white;
            display: inline;
        }
        .myModal-input{
            width: 200px;
            line-height: 30px;
            display: inline;
        }
        .modal-header{
            background-color: #6495ED;
        }
        .modal-dialog{
            width:900px;
        }
        .img{
            width:120px;
            height: 120px;
        }
        .imgDiv{
            left: 560px;
            width: 200px;
            height: 200px;

        }
        label{
            display: inline-block;
            min-width: 70px;/*或者 width: 100px;*/
        }
    </style>
</head>

<body>
<div th:replace="../templates/nav"></div>
<div class="container-fluid">
    <div class="row">
        <div th:replace="../templates/menu"></div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="glyphicon glyphicon-th"></i>周考成绩</h3>
                </div>
                <div class="panel-body">
                    <form class="form-inline" role="form" style="float:left;">
                        <div class="form-group has-feedback">
                            来源：<select name="resource" id="resource" class="form-control">
                            <option value="" selected="selected">请选择学生来源</option>
                            <option value="网上报名">网上报名</option>
                            <option value="经人介绍">经人介绍</option>
                            <option value="慕名而来">慕名而来</option>
                            <option value="线下报名">线下报名</option>
                        </select>
                            班级：<select name="cid" id="cid" class="form-control">

                        </select>
                            <div class="input-group">
                                <div class="input-group-addon">姓名</div>
                                <input class="form-control has-success" type="text" placeholder="请输入查询条件" id="stname">
                            </div>
                        </div>
                        <button type="button" class="btn btn-warning" id="btnSearch"><i class="glyphicon glyphicon-search"></i> 查询</button>
                        <input id="infor" type="button" value="查看模板" class="btn btn-warning" style="position:relative;left:200px" data-toggle="modal" data-target="#myModal2"/>
                        <input id="saveInfor" type="button" value="周考导入" class="btn btn-warning" style="position:relative;left:200px"  data-toggle="modal" data-target="#myModal"/>
                        <input id="outInfor" type="button" value="数据导出" class="btn btn-warning" style="position:relative;left:200px" onclick="ExcelExport()"/>

                    </form>
                    <br>
                    <hr style="clear:both;">
                    <div class="table-responsive">
                        <form id="listForm">
                            <table class="table  table-bordered">
                                <thead>
                                <tr >
                                    <th></th>
                                    <th>姓名</th>
                                    <th>学号</th>
                                    <th>班级</th>
                                    <th>第一阶段平均分</th>
                                    <th>第二阶段平均分</th>
                                    <th>第三阶段平均分</th>
                                    <th>项目阶段平均分</th>
                                    <th width="100">操作</th>
                                </tr>
                                </thead>
                                <tbody id="tbody">

                                </tbody>
                                <tfoot>

                                </tfoot>
                            </table>
                        </form>
                    </div>
                </div>
            </div>

            <!-- 模态框（Modal）导入学生周考成绩    excel导入-->
            <form id="importexcel" enctype="multipart/form-data">
                <div class="modal fade myModel" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                <h4 class="modal-title" id="myModalLabel">导入学员周考成绩</h4>
                            </div>
                            <div class="modal-body">
                                <div class="form-group">
                                    <label for="file1">选择文件</label><input name="file1" id="file1" type="file" class="form-control">
                                </div>
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <button type="button" class="btn btn-primary" id="btnAdd">上传</button>
                            </div>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal-dialog -->
                </div>
            </form>

            <!-- 模态框（Modal）导入学生周考成绩    查看模板-->
            <form id="excelModel" enctype="multipart/form-data">
                <div class="modal fade myModel" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                <h4 class="modal-title" id="myModalLabel2">表格模板</h4>
                            </div>
                            <div class="modal-body">
                                <div class="form-group imgDiv">
                                   <img th:src="@{/img/muban.jpg}" height="200px" width="850px" id="icon">
                                </div>
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            </div>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal-dialog -->
                </div>
            </form>

            <!-- 模态框（Modal）查看修改学生周考成绩-->
            <form id="saveForm" enctype="multipart/form-data">
                <div class="modal fade myModel" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                <h4 class="modal-title" id="myModalLabel1">查看学员周考成绩</h4>
                            </div>
                            <input type="hidden" name="mid" id="mid2">
                            <input type="hidden" name="sid" id="sid2">
                            <div class="modal-body">
                                <div class="form-group">
                                    <label for="cid">班级：</label><input name="cid" id="cid1" class="form-control myModal-input">
                                    <label for="sno">阶段：</label><input name="sno" id="sno" class="form-control myModal-input">

                                </input>
                                    <label for="score1">第一周：</label><input name="score1" id="score1" class="form-control myModal-input">
                                    <label for="score2">第二周：</label><input name="score2" id="score2" class="form-control myModal-input">
                                    <label for="score3">第三周：</label><input name="score3" id="score3" class="form-control myModal-input">
                                    <label for="score4">第四周：</label><input name="score4" id="score4" class="form-control myModal-input">
                                    <label for="score5">第五周：</label><input name="score5" id="score5" class="form-control myModal-input">
                                </div>
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <button type="button" class="btn btn-primary" id="btnSave">确认更改</button>
                            </div>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal-dialog -->
                </div>
            </form>
        </div>
    </div>
</div>
<script th:src="@{../jquery/jquery-2.1.1.min.js}"></script>
<script th:src="@{|/jquery/jquery.md5.js|}"></script>
<script th:src="@{../bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{../script/docs.min.js}"></script>
<script th:src="@{../jquery/xlsx.core.min.js}"></script>
<script th:src="@{../layer/layer.js}"></script>
<script type="text/javascript">
    $(function () {
        $(".list-group-item").click(function(){
            if ( $(this).find("ul") ) {
                $(this).toggleClass("tree-closed");
                if ( $(this).hasClass("tree-closed") ) {
                    $("ul", this).hide("fast");
                } else {
                    $("ul", this).show("fast");
                }
            }
        });
        showList();
    });
    $(function () {
        url1 = "/clazz/clazzDo";
        $.get(url1,"",function (data){
            if(data.result){
                var htmldata1 = "";
                htmldata1 = htmldata1 + "<option name='' value='' >请选择班级</option>";
                $.each(data.clazzList,function(index,clazz){
                    htmldata1 = htmldata1 + "<option name='cid' value="+clazz.cid+" >"+clazz.cname+"</option>";
                })
                $("#cid").html(htmldata1);
            }
        })
    });

    //导入excel文件
    $("#btnAdd").click(function () {
        var formdata = new FormData($("#importexcel")[0]);
        var userFile=/\.xl.{1,2}$/;
        if(!userFile.test( $("#file1").val())){
            layer.msg("只能上传Excel文件", {time: 1000, icon: 5, shift: 6}, function () {
            });
            return;
        }
        $.ajax({
            url: "/student/importexcel",
            type: "post",
            dataType:"json",
            async:false,
            cache:false,
            contentType:false,
            processData:false,
            data: formdata,
            success: function (msg) {
                if (msg) {
                    layer.msg("导入成功", {time: 1000, icon: 4}, function () {
                        location.href="/student/weekscore";
                    });
                }
            }
        });
    });

    $("#btnSearch").click(function () {
        var username = /^[\u4E00-\u9FA5A-Za-z]{0,16}$/;
        console.log($("#stname").val())
        if(!username.test($("#stname").val())){
            layer.msg("学生姓名只能输入中文和英文,长度需要为0-16位", {time: 1000, icon: 5, shift: 6}, function () {
            });
            return;
        };
        showList();
    });
    /*Excel导出  */
    function ExcelExport() {
        alert("导出excel!")
        var url = "/student/downloadexcel";
        window.open(url);
    }

    function edit(mid){
        $("#mid2").val(mid),
            $.ajax({
                url: "/student/editMark",
                type: "post",
                data: {"mid": mid},
                success: function (data) {
                    if (data.result) {
                        $("#cid1").val(data.mark.student.cid);
                        $("#sid2").val(data.mark.sid);
                        $("#sno").val(data.mark.stage.stname);
                        $("#score1").val(data.mark.score1);
                        $("#score2").val(data.mark.score2);
                        $("#score3").val(data.mark.score3);
                        $("#score4").val(data.mark.score4);
                        $("#score5").val(data.mark.score5);
                    } else {
                        layer.msg("修改失败", {time: 1000, icon: 5}, function () {
                        });
                    }
                }
            });
        // url2 = "/student/stageDo";
        // $.get(url2,"",function (data){
        //     if(data.result){
        //         var htmldata1 = "";
        //         $.each(data.stageList,function(index,stage){
        //             // if(stage.sno==$("#sno2").val()){
        //             //     htmldata1 = htmldata1 + "<option name='sno' value='"+stage.sno+"' selected >"+stage.stname+"</option>";
        //             // }else{
        //                 htmldata1 = htmldata1 + "<option name='sno' value='"+stage.sno+"'>"+stage.stname+"</option>";
        //             // }
        //
        //         });
        //         $("#sno").html(htmldata1);
        //     }
        // });
    }

    $("#btnSave").click(function () {
        $.ajax({
            url: "/student/editMarkDo",
            type: "post",
            data: $("#saveForm").serialize(),
            success: function (data) {
                if (data.result) {
                    layer.msg("修改成功", {time: 1000, icon: 4}, function () {
                        location.href = "/student/weekscore";
                    });
                } else {
                    layer.msg("修改失败", {time: 1000, icon: 5}, function () {
                    });
                }
            }
        });
    });



    //列表展示
    function showList() {
        $.ajax({
            url:"/student/weeklistDo",
            type:"post",
            data:{"stname":$("#stname").val(),"resource":$("#resource").val(),"cid":$("#cid").val()},
            success:function (data) {
                if (data.result){
                    var str="";
                    $.each(data.markList, function (index, mark) {
                        str += "<tr>";
                        str += "<td>" +mark.mid + "</td>";
                        str += "<td>" + mark.student.stname+ "</td>";
                        str += "<td>wnxy" + mark.sid+ "</td>";
                        str += "<td>" + mark.student.clazz.cid + "</td>";
                        str += "<td>" + mark.firstStage+ "</td>";
                        str += "<td>" + mark.secondStage + "</td>";
                        str += "<td>" + mark.thirdStage + "</td>";
                        str += "<td>" + mark.processStage + "</td>";

                        str += "<td>";
                        str += '<button type="button" class="btn btn-success btn-xs" data-toggle="modal" data-target="#myModal1" onclick="edit(' + mark.mid +')"><i class=" glyphicon glyphicon-check"></i></button>';
                        str += "</td>";
                        str += "</tr>";
                    });
                    $("#tbody").html(str);
                } else {
                    layer.msg("数据加载失败", {time: 1000, icon: 5, shift: 6}, function () {
                    });
                }
            }
        });
    }



</script>
</body>
</html>